<template>
  <div class="content-center-wrap">
    <div class="filter-wrap border-all clearfix">
      <span class="collapse-left-icon collapse-icon fl" @click="handlerCollapse('left')">
        <span v-if="collapseLeftFlag" title="缩小">
          <Icon type="icon iconfont icon-xianghou" />
        </span>
        <span v-else title="放大">
          <Icon type="icon iconfont icon-xiangqian" />
        </span>
      </span>
      <span class="collapse-right-icon collapse-icon fr" @click="handlerCollapse('right')">
        <span v-if="collapseRightFlag" title="缩小">
          <Icon type="icon iconfont icon-xiangqian" />
        </span>
        <span v-else title="放大">
          <Icon type="icon iconfont icon-xianghou" />
        </span>
      </span>
    </div>
    <div class="content-body">
      <div class="top-wrap">
        <Card>
          <center-top />
        </Card>
      </div>
      <div class="bottom-wrap">
        <Card>
          <center-bottom />
        </Card>
      </div>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import { createNamespacedHelpers } from 'vuex'
import CenterTop from '../CenterTop'
import CenterBottom from '../CenterBottom'
const { mapActions, mapState } = createNamespacedHelpers('leakMonitoring')

export default {
  name: 'LeakMonitoringCenter',
  components: {
    CenterTop,
    CenterBottom
  },
  computed: {
    ...mapState(['currentMeterId', 'collapseLeftFlag', 'collapseRightFlag', 'selecteType', 'centerBottomChartLoading']),
    showBottomRightWrap() {
      return this.selecteType === 'zqfx'
    },
    showParseBtn() {
      return this.currentMeterId && this.selecteType && this.selecteType !== 'qnyqfx'
    }
  },
  data() {
    return {
      selectType: Object.freeze([
        {
          name: '日用气统计',
          value: 'ryqtj'
        },
        {
          name: '周期分析',
          value: 'zqfx'
        },
        {
          name: '全年零用气分析',
          value: 'qnyqfx'
        }
      ]),
      rangeDate: undefined,
      year: undefined
    }
  },
  watch: {
    selecteType(newData, oldData) {
      if (oldData === 'qnyqfx') {
        const [startTime, endTime] = this.rangeDate
        this.clearCenterTopCandData()
        this.loadCenterTopCandData({
          startTime: startTime ? dayjs(startTime).format('YYYY-MM-DD') : undefined,
          endTime: endTime ? dayjs(endTime).format('YYYY-MM-DD') : undefined
        })
      }
    }
  },
  methods: {
    ...mapActions([
      'changeCollapse',
      'changeSelectType',
      'loadDataBySelectType',
      'changeDefaultDate',
      'changeStartAndEndTime',
      'loadCenterTopCandData',
      'clearCenterTopCandData',
      'loadQNYQFXData',
      'changeSelecteYear'
    ]),
    handlerCollapse(arg) {
      if (arg === 'left') {
        this.changeCollapse({
          type: arg,
          status: !this.collapseLeftFlag
        })
      } else if (arg === 'right') {
        this.changeCollapse({
          type: arg,
          status: !this.collapseRightFlag
        })
      }
    },
    /**
     * desc: 选择分类
     * param {type}
     * return {type} void
     */
    handleChangeType(val) {
      this.changeSelectType(val)
      if (val === 'qnyqfx') {
        this.loadDataBySelectType({
          year: this.year ? dayjs(this.year).format('YYYY') : undefined
        })
      } else {
        this.loadDataBySelectType()
      }
    },
    handleParse() {
      this.loadDataBySelectType()
    },
    changeYear(year) {
      this.changeSelecteYear(year)
      this.loadQNYQFXData({
        year: year || undefined
      })
    }
  }
}
</script>
<style lang="less" scoped>
.content-center-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .filter-wrap {
    padding: 10px;
    text-align: center;
    border-bottom: none;
  }

  .collapse-icon {
    cursor: pointer;
  }

  .collapse-left-icon {
    margin-left: 10px;
  }

  .collapse-right-icon {
    margin-right: 10px;
  }

  .content-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .top-wrap,
  .bottom-wrap {
    flex: 1;
    overflow: hidden;
  }
  .top-wrap {
    margin-bottom: 10px;
  }
}
</style>
